<template>
  <div class="container">
    <div class="header" v-show="aiFlag">
      <p>AI 小助手</p>
      <div class="close" @click="close">
      </div>
    </div>
    <div class="content clear" id="scrollBarContent" v-show="aiFlag">
      <div id="messageContainer">
        <div class="messageBox">
          <div class="avatar">
            <img src="../assets/img/qavatar.png" alt="">
          </div>
          <div class="message">
            您好，我是您的AI小助手，请输入您的问题！
          </div>
        </div>
        <div v-for="(item,index) in list"
             class="clear"
             :key="index">
          <div v-if="item.type===0" class="question">
            <div class="text" v-html="item.content">
            </div>
            <div class="avatar">
              <img src="../assets/img/aavatar.png" alt="">
            </div>
          </div>
          <div v-else class="messageBox">
            <div class="avatar">
              <img src="../assets/img/qavatar.png" alt="">
            </div>
            <div class="message">
              <div v-html="item.content"></div>
              <div v-if="item.more">
                <br/>
                <div v-for="(item2,index2) in item.more" :key="index2">
                  <div v-if="item2.type==1">
                    <a @click="showOption2(item2.content_new)">{{item2.content}}</a>
                  </div>
                  <div v-else>
                    <a @click="showOption(item2.content_new)">{{item2.content}}</a>
                  </div>
                  <br/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="rcw-widget-container rcw-previewer">
      <div class="rcw-sender">
        <input type="text" class="rcw-new-message"
               v-model="newMessage"
               name="message" placeholder="请输入您的问题..." autocomplete="off" @change="inputHandler" @mouseup="inputHandler" @keyup="inputHandler" @keyup.enter="sendMsg">
        <button type="button" class="rcw-send" @click="sendMsg">
          <img src="../assets/img/send01.png" alt="">
        </button>
      </div>
    </div>

  </div>
</template>

<script>
import {post} from "@/assets/js/http"
import {Toast,Popup} from "vant";
export default {
  name: "ai",
  data(){
    return{
      newMessage:"",
      list:[],
      aiFlag:true,
      robot:this.$route.query.robot ? this.$route.query.robot : 0,
    }
  },
  components:{
    [Popup.name]:Popup
  },
  mounted() {
    if(window.localStorage.getItem("list" + this.robot))
    {
      this.list = JSON.parse(window.localStorage.getItem("list" + this.robot))
    }
  },
  methods:{
    inputHandler(){
      if (this.newMessage==="") {
        document.querySelector('.rcw-send').style.background = 'hsl(0deg 0% 80%)';
        document.querySelector('.rcw-send').style.border = '0.02667rem solid hsl(0deg 0% 80%)';
      } else {
        document.querySelector('.rcw-send').style.background = '#E6C999';
        document.querySelector('.rcw-send').style.border = '0.02667rem solid #E6C999';
      }
      
    },
    close(){
      window.parent.postMessage("close","*");
      window.parent.closeframe();
    },
    callClose(){
      this.aiFlag = true;
    },
    sendMsg(){
      if (this.newMessage===""){
        Toast("请输入问题内容！")
        return false;
      }
      let param={
        ques: this.newMessage,  //用户输入的问题文本
        robot: this.robot
      }
      let send = {
        content: this.newMessage,
        type: 0
      }
      this.list.push(send);
      var action = 'test'
      /*
      switch (this.robot) {
        case 1:
          action = 'get_unit_answer'
          break;
        case 2:
          action = 'test'
          break;
      }
      */
      post('https://65t749v1rtaq2.cfc-execute.gz.baidubce.com/' + action,param).then(res=>{

        this.newMessage="";
        this.inputHandler()

        res.type = 1;
        if (res.error_code===0){
          var content = res.result.context.SYS_PRESUMED_HIST[1]
          content = this.convert(content)
          if(res.result.responses[0].actions[0].options.length>0) {
            var type = 0
            var more = []
            var options = res.result.responses[0].actions[0].options
            for(var i=0;i<options.length;i++){
              var option_content = options[i].option
              var option_content_new = options[i].info.full_answer
              if(option_content_new===' '){
                option_content_new = '请进一步输入关键信息，帮助我们为您找到更合适的答案。'
              }
              if(option_content_new === undefined){
                option_content_new = option_content
                type = 1
                content = "请查看下述选项："
              }
              more[i] = {
                content: option_content,
                content_new: option_content_new,
                type: type
              }
              // this.list.push({content: option_content, content_new: option_content_new});
            }
            this.list.push({content: content, more: more});
          }else{
            this.list.push({content: content});
          }
        }else{
          this.list.push({content: "我不知道该怎样答复您。"});
        }
        window.localStorage.setItem("list" + this.robot, JSON.stringify(this.list));

        this.$nextTick(()=>{
          setTimeout(()=>{
            let ele = document.getElementById('scrollBarContent')
            ele.scrollTop=document.getElementById('messageContainer').offsetHeight;
            console.log(ele.offsetHeight)
          })
        })

      }).catch(res=>{
        console.log(res)
      })


    },
    showOption(content){
      content = this.convert(content)
      this.list.push({content: content});

      this.$nextTick(()=>{
        setTimeout(()=>{
          let ele = document.getElementById('scrollBarContent')
          ele.scrollTop=document.getElementById('messageContainer').offsetHeight;
          console.log(ele.offsetHeight)
        })
      })
    },
    showOption2(content){
      this.newMessage = content
      this.sendMsg()
    },
    convert(content){
      if(content.indexOf('http')>-1){
          var url = content.match(/《([^》]+)》/)[1];
          if(url.indexOf('mp4')>-1){
            content = `<video autoplay controls controlsList="nodownload" src="${url}" style='width:100%;' ></video>`;
          }else if(url.indexOf('png')>-1){
            content = `<img src="${url}" style='width:100%;' />`;
          }else if(url.indexOf('http')>-1)
          {
            content = `<a href="${url}" target="_blank">${url}</a>`;
          }
      }
      return content
    }
  }
}
</script>

<style scoped lang="less">
.close{
  width: 33px;
  height: 33px;
  background: url(../assets/img/close.png) no-repeat center center/100%;
  position: absolute;
  top: 8px;
  right: 13px;
  cursor: pointer;
}

#scrollBarContent{
  width: 100%;
  height: 87%;
  box-sizing: border-box;
  background: #fff;
  padding-top: 40px;
  padding-bottom: 100px;
  top: 49px;
}
.clear:after{
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}
.clear{
  zoom: 1;
}
.callContainer{
  width: 100%;
  height: 152px;
  background: #FFFFFF;
  border-radius: 10px;
  margin: 0 auto;
  overflow: hidden;
  .close{
    font-size: 15px;
    font-weight: 500;
    color: #666666;
    height: 44px;
    line-height: 44px;
  }
}
.callContainer .title{
  font-size: 17PX;
  color: #333333;
  margin-top: 30px;
}
.callContainer .number{
  font-size: 15px;
  color: #666666;
  height: 45px;
  line-height: 45px;
  border-bottom: 1px solid rgba(151, 151, 151, 0.08);
  margin-top: 8px;
  a{
    color: #027AFF;
  }
}
.callBtn{
  display: block;
  width: 120px;
  height: 30px;
  background: #7AAEE8;
  border-radius: 2px;
  color: #FFFFFF;
  font-size: 15px;
  line-height: 30px;
  margin: 20px auto 0 auto;
}
.container{
  width: 375px;
  height: 100%;
  margin: 0 auto;
  // padding-top: 80px;
  // padding-bottom: 100px;
  box-sizing: border-box;
  // background:#fff;
  border-radius: 12px 12px 0 0;
  position: relative;
  overflow: hidden;
}
.question{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 20px;
  float: right;
}
.question .text{
  width: 220px;
  padding: 10px 6px 14px 10px;
  background: #FAF4E9;
  border-radius: 10px 10px 10px 10px;
  text-align: left;
  box-sizing: border-box;
  word-wrap:break-word;
  font-size: 15px;
  color: #000000;
  position:relative;
}
.question .avatar{
  width: 36px;
  height: 36px;
  margin-left: 9px;
  border-radius: 50%;
  background-color: #E7CB9D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pic{
  width: 278px;
  background: #FFFFFF;
  border-radius: 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 10px auto;
}
.pic img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.message a{
  color: #027AFF;
}
.message video{
  width: 278px;
  height: 180px;
}
.leaveMessage{
  width: 100%;
  height: calc(100vh - 60px);
  margin: 0px auto;
  position: fixed;
  top: 58px;
  left: 0;
  z-index: 99;
  background-color: #FFFFFF;
}
.leaveMessage p{
  font-size: 15px;
  color: #333333;
  line-height: 23px;
  letter-spacing: 1px;
  margin-bottom: 20px;
  text-align: center;
  margin-top: 30px;

}
.messageContent {
  width: 335px;
  height: 322px;
  margin: 0 auto;
  background: #FFFFFF;
  /*box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.09);
  border-radius: 10px;
  border-top: 4px solid #A4CFFB;*/
}
.submitBtn{
  width: 153px;
  height: 40px;
  border-radius: 2px;
  line-height: 40px;
  font-size: 15px;
  background-color: #027AFF;
  text-align: center;
  color: #FFFFFF;
  border: 1px solid #027AFF;
}
.submitDisBtn{
  width: 153px;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  background-color: #E5E5E5;
  border-radius: 2px;
  text-align: center;
  color: #868686;
  border: 1px solid #E5E5E5;
}
.btnContainer{
  width: 325px;
  margin: 0 auto;
  display: flex;flex-direction: row;
  justify-content: space-around;
}
.box{
  width: 315px;
  height: 48px;
  background: #FFFFFF;
  border-radius: 2px;
  border: 1px solid #027AFF;
  margin: 20px auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 10px;
  img{
    display: block;
    width: 24px;
    height: auto;
  }
  input{
    width: 100%;
    display: block;
    margin: 0 auto;
    height: 100%;
    border: none;
    padding-left: 10px;
  }
}
.liuyanbox{
  width: 315px;
  height: 140px;
  border-radius: 2px;
  border: 1px solid #027AFF;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding-left: 10px;
  img{
    display: block;
    width: 24px;
    height: auto;
    margin-top: 10px;
  }
  textarea{
    width: 100%;
    display: block;
    margin: 0 auto;
    height: 100%;
    border: none;
    padding: 10px;
  }
}
.messageContent label{
  width: 60px;
  font-size: 15px;
  color: #999999;
  line-height: 23px;
  letter-spacing: 1px;
}
.messageContent label span{
  color: #E05353;
}
.notice{
  width: 236px;
  height: 36px;
  font-size: 13px;
  font-weight: 400;
  color: #9FC1E4;
  line-height: 18px;
  margin: 24px auto 20px auto;
}
.header{
  width: 375px;
  height: 49px;
  line-height: 49px;
  background: rgba(14, 26, 40,0.95);
  // display: flex;
  // flex-direction: row;
  // align-items: center;
  // justify-content: flex-start;
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 10;
  border-radius: 12px 12px 0 0;
}
.header img{
  display: block;
  width: 36px;
  height: 36px;
  margin: 12px;
}
.header p{
  font-size: 17px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #FFFFFF;
  letter-spacing: 1px;
}
.messageBox{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 20px;
  float: left;
}
.content{
  padding: 0 10px;
  overflow-y: auto;
  position: relative;
  box-sizing: border-box;
}
.messageBox .avatar{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #E7CB9D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar img{
  display: block;
  width: 100%;
  height: auto;
}
.message{
  width: 260px;
  font-size: 15px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  color: #333333;
  letter-spacing: 1px;
  padding: 10px 15px;
  background: #fff;
  border-radius: 10px 10px 10px 10px;
  box-sizing: border-box;
  text-align: left;
  margin-left: 12px;
  word-break: break-all;
  position: relative;
  border:1.5px solid #DFB372;
}
.message::before{
  display: block;
  content: '';
  position: absolute; 
  left: -10px; 
  top: 10px; 
  border-top: 6px solid transparent; 
  border-bottom: 6px solid transparent; 
  border-right: 10px solid #DFB372;
}
.message::after{
  display: block;
  content: '';
  position: absolute; 
  left: -8px; 
  top: 10px; 
  border-top: 6px solid transparent; 
  border-bottom: 6px solid transparent; 
  border-right: 10px solid #fff;
}
.text::before{
  display: block;
  content: '';
  position: absolute; 
  right: -9px; 
  top: 10px; 
  border-top: 6px solid transparent; 
  border-bottom: 6px solid transparent; 
  border-left: 10px solid #FAF4E9;
}
.message ul{
  margin-top: 20px;
}
.message li{
  font-size: 13px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  color: #4893EB;
  line-height: 25px;
  letter-spacing: 1px;
}
.warning{
  width: 278px;
  height: 36px;
  background: #FFFFFF;
  border-radius: 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
  font-family: AppleColorEmoji;
  color: #CC1919;
  line-height: 25px;
  letter-spacing: 1px;
  margin: 9px auto;
}
.warning img{
  display: block;
  height: 25px;
  width: auto;
  margin-left: 38px;
}
.rcw-widget-container{
  width: 375px;
  height: 60px;
  // background: #FFFFFF;
  box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.09);
  border-radius: 0 0 12px 12px;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: rgba(14, 26, 40);
  padding: 10px 20px;
  box-sizing: border-box;
}
.rcw-sender {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  background-color: #fff;
  width: 340px;
  height: 39px;
  border-radius: 6px;
 }
.rcw-sender.expand {
  height: 55px; }
.rcw-new-message {
  width: 280px;
  height: 38px;
  background: #FFFFFF;
  border-radius: 6px;
  border: 1px solid transparent;
  padding-left: 15px;
  resize: none; }
.rcw-new-message:focus {
  outline: none; }
.rcw-new-message.expand {
  height: 40px; }
.rcw-send {
  width: 29px;
  height: 29px;
  background: hsl(0deg 0% 80%);
  border-radius: 2px;
  border: 1px solid hsl(0deg 0% 80%);
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rcw-send img{
  display: block;
  width: 16px;
}
.rcw-send .rcw-send-icon {
  height: 25px; }
@media screen and (max-width: 800px) {
  .rcw-sender {
    -ms-flex-negative: 0;
    flex-shrink: 0; } }
.control{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #E8E8E8;
  height: 32px;
}
.control p{
  font-size: 15px;
  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  font-weight: 400;
  color: #BBBBBB;
  line-height: 23px;
  margin-left: 7px;
}
.btn{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 86px;
  height: 20px;
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #DEDEDE;
  margin-right: 10px;
}
.btn img{
  display: block;
  width: 14px;
  height: 14px;
}
.btn span{
  font-size: 13px;
  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
}
</style>